<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-date-picker v-model="timeSlot" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
        start-placeholder="开始日期" @change="dateChange" end-placeholder="结束日期">
      </el-date-picker>

    </div>
    <div style="margin-bottom:20px">
      <el-select v-model="search.roomName" class="filter-item" placeholder="全部机房" @change="roomChange" clearable>
        <el-option v-for="item in roomList" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-select v-model="search.equipmentType" placeholder="请选择设备类型" @change="equipmentChange">
        <el-option v-for="item in equipmentList" :key="item.id" :label="item.equipmentType"
          :value="item.equipmentType" />
      </el-select>
      <el-select v-model="search.equipmentNo" placeholder="请选择设备编号" @change="equipmentNoChange">
        <el-option v-for="item in equipmentNoList" :key="item.id" :label="item.equipmentNo" :value="item.id" />
      </el-select>
      <el-button v-permission="['computer:room:list']" class="filter-item" type="primary" icon="el-icon-search"
        @click="handleFilter">查找</el-button>
      <span style="margin-left:16px">设备id: {{ this.search.equipmentId?this.search.equipmentId :"暂无" }}</span>

    </div>


    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
      highlight-current-row>
      <el-table-column type="index" align="center" label="序号" width="50">
        <template scope="scope">
          <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
          <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="巡检人" prop="inspectionPeople" />
      <el-table-column align="center" label="温度（℃）" prop="temperature"></el-table-column>
      <el-table-column align="center" label="湿度（%）" prop="humidity" />
      <el-table-column align="center" label="运行状态" prop="runningStatus">
        <template scope="scope">
          <div v-if="scope.row.runningStatus == 1" style="width:100%;background-color: #3ebc37;color:#ffffff;">正常</div>
          <div v-if="scope.row.runningStatus == 2" style="width:100%;background-color: #f0541d;color:#ffffff;">异常</div>

        </template>
      </el-table-column>
      <el-table-column align="center" label="巡检结果" prop="inspectionStatus">
        <template scope="scope">

          <div v-if="scope.row.inspectionStatus == 3" style="width:100%;background-color: #3ebc37;color:#ffffff;">正常
          </div>
          <div v-if="scope.row.inspectionStatus == 4" style="width:100%;background-color: #f0541d;color:#ffffff;">异常
          </div>
          <div v-if="scope.row.inspectionStatus == 5" style="width:100%;background-color: #999999;color:#ffffff;">漏检
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="附件" prop="photo">
        <template scope="scope">
          <a style="color:#5f7de9" @click="enlarge(scope.row)">查看</a>
        </template>
      </el-table-column>
      <el-table-column align="center" label="巡检时间" prop="gmtCreate"></el-table-column>
      <el-table-column align="center" label="轮数" prop="rounds"></el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="id" prop="id" hidden>
          <el-input v-model="dataForm.id" />
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="dataForm.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" :loading="submiting" type="primary" @click="createData">确定</el-button>
        <el-button v-else :loading="submiting" type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看附件 -->
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="提示">
      <el-carousel :interval="5000" arrow="always" style="width:100%" height="500px">
        <el-carousel-item v-for="item in srcList" :key="item">
          <div style="margin:0 auto">
            <img :src="item" alt="" style="width:100%;height:500px">
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listequipment,
    createComputerRoom,
    updateComputerRoom,
    computerRoomXiaLa, //机房
    equipmentXiaLa, //设备
  } from '@/api/recordPage'
  import Pagination from '@/components/Pagination'
  import Template from '../vip/template.vue'
  export default {
    name: 'ComputerRoom',
    components: {
      Pagination,
      Template
    },
    data() {
      return {
        list: null,
        total: 0,
        listLoading: true,
        dataForm: {
          id: undefined
        },
        dialogFormVisible: false,
        submiting: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        rules: {
          name: [{
            required: true,
            message: 'name名称不能为空',
            trigger: 'blur'
          }]
        },
        timeSlot: [],
        dataInfo: {}, //参数
        roomList: [], //机房
        search: {}, //筛选
        equipmentList: [], //设备
        equipmentNoList: [], //设备编号
        listQuery: {
          page: 1,
          limit: 20,
        },
        startDate: "",
        endDate: "",
        //查看附件
        dialogVisible: false,
        srcList: []
      }
    },
    created() {

      this.dataInfo = JSON.parse(this.$route.query.obj)
      this.search.roomName = this.dataInfo.roomName
      this.search.equipmentType = this.dataInfo.equipmentType
      this.search.equipmentNo = this.dataInfo.equipmentNo
      this.search.equipmentId = this.dataInfo.id
      this.getDate() //获取默认时间
      this.dataXiaLa() //下拉数据
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        this.listQuery.startDate = this.startDate
        this.listQuery.endDate = this.endDate
        this.listQuery.equipmentId = this.search.equipmentId
        listequipment(this.listQuery).then(response => {
            this.list = response.data.data.items
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      dataXiaLa() {
        computerRoomXiaLa()
          .then((response) => {
            // 机房类型下拉
            this.roomList = response.data.data
          })
        equipmentXiaLa({
            roomName: this.search.roomName
          })
          .then((response) => {
            // 设备类型下拉
            this.equipmentList = response.data.data
          })
        equipmentXiaLa({
            roomName: this.search.roomName,
            equipmentType: this.search.equipmentType
          })
          .then((response) => {
            // 设备编号下拉
            this.equipmentNoList = response.data.data
          })

      },
      roomChange(e) {
        this.search = {}
        this.search.roomName = e
        this.list = [] //清空列表
        this.dataXiaLa()
      },
      equipmentChange() {
        this.search.equipmentId = ""
        this.search.equipmentNo = ""
        this.list = [] //清空列表
        this.dataXiaLa()
      },
      equipmentNoChange(e) {
        this.search.equipmentId = e
        this.getList()
      },

      getDate() {
        let date = new Date()
        let date1 = new Date(new Date().getTime() - 24 * 60 * 60 * 1000) //上一天时间
        let year = date.getFullYear()
        let month = date.getMonth() + 1;
        let month1 = date1.getMonth() + 1;
        let day = date.getDate();
        let day1 = date1.getDate();
        if (month < 10) {
          month = "0" + month
        }
        if (month1 < 10) {
          month1 = "0" + month1
        }
        if (day < 10) {
          day = "0" + day
        }
        if (day1 < 10) {
          day1 = "0" + day1
        }
        this.startDate = year + "-" + month1 + "-" + day1
        this.endDate = year + "-" + month + "-" + day
        this.timeSlot = [this.startDate, this.endDate]
      },
      dateChange(e) {
        this.startDate = e[0]
        this.endDate = e[1]
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      resetForm() {
        this.dataForm = {
          id: undefined
        }
      },
      enlarge(val) {
        this.dialogVisible = true
        // val.photo = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/admin/195c8e3d3035404bb8cdbe176949076c.jpg,https://taohaoliang.oss-cn-beijing.aliyuncs.com/admin/1d9d101513914135b19295ce68b1ed17.jpg"
        this.srcList = val.photo.split(',')
      },
      handleClose() {
        this.srcList = []
        this.dialogVisible = false
      },
      createData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.submiting = true
            createComputerRoom(this.dataForm).then(response => {
                this.list.unshift(response.data.data)
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '添加成功'
                })
                this.getList()
                this.submiting = false
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
                this.submiting = false
              })
          }
        })
      },
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.submiting = true
            updateComputerRoom(this.dataForm).then(() => {
                for (const v of this.list) {
                  if (v.id === this.dataForm.id) {
                    const index = this.list.indexOf(v)
                    this.list.splice(index, 1, this.dataForm)
                    break
                  }
                }
                this.dialogFormVisible = false
                this.submiting = false
                this.getList()
                this.$notify.success({
                  title: '成功',
                  message: '更新成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
                this.submiting = false
              })
          }
        })
      },
    }
  }
</script>
